<template>
  <div class="wrapper">
    <!-- 搜索 -->
    <div class="searchWrapper">
      <router-link to="/search">
        <input type="text" placeholder="请输入搜索内容" />
        <img src="@/assets/images/shop/search.png" class="searchIcon" />
      </router-link>
    </div>
    <p class="welTitle">
      欢迎您，{{userInfo && userInfo.username && userInfo.username.slice(0,1)}} {{userInfo.sex==='1'?"先生":userInfo.sex==='2'?"女士":""}}！您当前还有
      <span
        class="red"
      >{{userInfo.coinAmount}}</span> 积分
    </p>
    <!-- 预留类目的 -->
    <div class="content">
      <div class="sidebar" style="position:sticky;position:-webkit-sticky;top=0;">
        <van-sidebar v-model="activeKey" @change="change">
          <van-sidebar-item
            v-for="(item,index) in categoryList"
            :key="index"
            @click="toggleTabs(item.id)"
            :title="item.categoryName"
          />
        </van-sidebar>
      </div>
      <div class="list_wrap">
        <van-list
          v-model="loading"
          finished-text="更多礼品正在备货中"
          :finished="finished"
          @load="getList()"
          style="padding:0.5rem;padding-bottom: 4.5rem"
        >
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="index in 1" :key="index">
              <img class="swiper_img" src="@/assets/images/shop/banner.jpg" />
            </van-swipe-item>
          </van-swipe>
          <div
            v-for="(item,index) in list"
            :key="index"
            class="leftWrappper"
            @click="todetail(item)"
          >
            <img :src="imgBaseUrl + item.ico" />

            <div class="centerWrapper">
              <div class="centerContent">
                <p class="FS_24">{{item.subTitle}}</p>
                <div class="subTitle" v-if="item.skuList.length>0">
                  <span v-for="(item,index) in item.skuList" :key="index">{{item}}</span>
                </div>
                <!-- <div class="sku" v-if="item.skuList.length>0">
                  <p v-for="(item,index) in item.skuList" :key="index">{{item}}</p>
                </div>-->
                <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <p
                    class="FS_2"
                    v-if="!item.skuList.length>0"
                  >￥{{item.priceList.length>1? item.priceList[0]+'元起':item.price?item.price+'元':''}}</p>
                  <del
                    v-if="!item.skuList.length>0"
                    style="font-sizi: 18px;color: #8b8a8a"
                  >￥{{item.oPrice}}</del>
                  <p
                    v-if="!item.skuList.length>0"
                    style="font-sizi: 18px;color: #8b8a8a"
                  >库存：{{item.limitNum}}</p>
                  <div @click="todetail(item)">
                    <div class="rightBtn">
                      <button
                        :class="{'gray':item.limitNum===0 ,'blue':item.limitNum !==0}"
                      >{{item.limitNum !==0 ? '立即购买' : '敬请期待'}}</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <router-link :to="{path: item.buyLimit === 0 ? '/error':'/points/detail', query:{ id: item.id,cid:cid}}">
                <div class="rightBtn">
                  <button :class="{'gray':item.limitNum===0 ,'blue':item.limitNum !==0}">{{item.limitNum !==0 ? '立即兑换' : '敬请期待'}}</button>
                </div>
              </router-link>-->
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import {
  Sidebar,
  SidebarItem,
  Row,
  Col,
  List,
  Cell,
  Swipe,
  SwipeItem
} from 'vant';
// import noData from '@/components/noData/nodata';
import { imgBaseUrl } from '@/config/env';
export default {
  data() {
    return {
      imgBaseUrl,
      active: 1,
      activeKey: 0,
      categoryList: [], // 侧边导航的类名
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
      cidList: [], // 类的id容器
      cid: '',
      relname: '', // 用户名
      userInfo: {} // 用户数据
    };
  },
  mounted() {
    this.getCategory();
    this.currentNumber();
    this.cid = this.$route.query.cid;
  },
  methods: {
    todetail(item) {
      this.$router.push({
        path: item.buyLimit === 0 ? '/error' : '/points/detail',
        query: { id: item.id }
      });
    },
    // 获取用户信息
    currentNumber() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        if (res && res.data.code === '0') {
          this.userInfo = res.data.object;
        }
      });
    },
    // 左边类名
    getCategory() {
      this.$http.post('/product/category').then(res => {
        console.log(res);
        if (res) {
          this.categoryList = res.data;
          this.cidList = this.categoryList.map((item, index) => {
            if (item.id + '' === this.$route.query.cid + '') {
              this.activeKey = index;
            }
            return item.id;
          });
          console.log(this.activeKey);
        }
      });
    },
    change() {
      this.cid = this.cidList[this.activeKey];
    },
    toggleTabs(index) {
      if (index === this.cid) {
        return;
      }
      this.list = [];
      this.cid = index;
      this.pageNum = 1;
      this.finished = false;
      setTimeout(() => {
        this.getList();
      }, 200);
    },
    getList() {
      console.log('innnnn');
      if (!this.finished) {
        this.$http
          .post('/product/list', {
            pageNum: this.pageNum.toString(),
            pageSize: '10',
            // categoryId: this.cid ? this.cid.toString() : null,
            productType: '0',
            cateId: this.cid
              ? this.cid + '' === '1'
                ? null
                : this.cid.toString()
              : null
          })
          .then(res => {
            console.log(res);
            if (res && res.data.code === '0') {
              let code = true; // 控制list容器是否有已请求数据，如有，关闭开关
              this.list.map(item => {
                if (
                  item.id.toString() === res.data.object.list[0].id.toString()
                ) {
                  code = false;
                }
              });
              if (code) {
                res.data.object.list.map(n => {
                  // 循环添加到数组
                  this.list.push(n);
                });
                this.loading = false;
                this.pageNum = this.pageNum + 1; // 页数累加
                if (res.data.object.pageNum >= res.data.object.pages) {
                  this.finished = true; // 最后一页加载结束
                }
              }
            }
          });
      } else {
        if (this.activeKey < this.categoryList.length) {
          this.activeKey + 1;
        }
      }
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 140) {
          this.finished = true;
        }
      }, 500);
    }
  },
  components: {
    'van-sidebar': Sidebar,
    'van-sidebar-item': SidebarItem,
    'van-row': Row,
    'van-col': Col,
    'van-list': List,
    'van-cell': Cell,
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem
  },
  watch: {
    $route() {
      console.log(this.$router.history.current);
      // 监听返回事件,强制返回首页
      // window.onpopstate = () => {
      //   if (this.$router.history.current.name === 'points') {
      //     console.log(this);
      //     this.$router.replace('home'); // 输入要返回的上一级路由地址
      //   }
      // };
    }
  }
};
</script>

<style lang="scss" scoped>
.van-sidebar-item--select {
  border-color: #1781fd;
}
.wrapper {
  background-color: #ffffff;
  .content {
    background-color: white;
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    position: fixed;
    .sidebar {
      width: 25%;
      position: relative;
      overflow: scroll;
    }
    .sidebar::-webkit-scrollbar {
      display: none;
    }
    .list_wrap {
      width: 75%;
      overflow: scroll;
      .leftWrappper {
        display: flex;
        line-height: 30px;
        padding: 10px 0;
        img {
          width: 2.2rem;
          height: 2.2rem;
          border-radius: 0.11rem;
        }
        .centerWrapper {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin-left: 0.1rem;
          width: 100%;
          .centerContent {
            line-height: 0.45rem;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            .FS_24 {
              @include sc(0.34rem, #000000);
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .FS_3 {
              @include sc(0.39rem, #ff020e);
              padding-top: 0.15rem;
              padding-bottom: 0.1rem;
            }
            .FS_2 {
              margin-top: 10px;
              @include sc(0.34rem, #ff020e);
            }
            .lineThrough {
              text-decoration: line-through;
            }
            .subTitle {
              padding: 0.1rem 0;
              span {
                // display: inline-block;
                padding: 0.066667rem;
                color: red;
                line-height: 0.54rem;
                border: 1px solid red;
                border-radius: 0.066667rem;
                margin: 0.066667rem;
                font-size: 0.24rem;
              }
            }
          }
        }

        .rightBtn {
          // text-align: end;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-end;
        }

        button {
          // background-color: #1781fd;
          border-radius: 0.11rem;
          border: none;
          line-height: 0.48rem;
          @include sc(0.24rem, #ffffff);
          padding: 0.1rem 0.2rem;
        }
        .blue {
          background-color: #28b46a;
        }
        .gray {
          background-color: #c0c0c0;
        }
      }
    }
  }
}
//搜索框
.searchWrapper {
  width: 100%;
  height: 1.6rem;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  input {
    width: 9.21rem;
    height: 0.87rem;
    background-color: #f1f1f1;
    border-radius: 0.39rem;
    border: none;
    position: absolute;
    top: 0.37rem;
    left: 0.4rem;
    text-align: center;
    font-size: 0.35rem;
  }
  .searchIcon {
    width: 0.51rem;
    height: 0.52rem;
    position: absolute;
    top: 0.57rem;
    right: 0.8rem;
  }
}

// 欢迎标题
.welTitle {
  @include sc(0.37rem, #2e2e2e);
  padding: 0.21rem 0.4rem;
  .red {
    color: #fd0101;
  }
}

// 右侧

.sidebar {
  width: 25%;
}
.van-sidebar {
  width: 100%;
}
.van-swipe {
  margin-bottom: 0.5rem;
}
.van-sidebar-item:nth-last-child(1) {
  margin-bottom: 4.5rem;
}
.sku {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  p {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 72px;
    // height: 35px;
    border-radius: 3px;
    border: solid 1px #fc0208;
    font-size: 18px;
    color: #fc0208;
    line-height: 30px;
    text-align: center;
    margin-left: 10px;
    margin-top: 10px;
  }
}
</style>
